<template>
    <section class="myCertificate" v-loading="loading">
        <!-- <h3 class="main-title">我的订单</h3> -->
        <!-- <div class="main-type">
            <div class="type-box">
                <div class="type-item" v-for="(item,index) in list" :class="item.addClass" @click="select(index)">{{item.name}}</div>
            </div>
        </div> -->
        <div>
            <ul class="titleMain">
                <li class="title1">名称</li>
                <li class="title3">关联课程</li>
                <li class="title4">状态</li>
                <li class="title2">获得时间</li>
                <li class="title5">操作</li>
              </ul>
              <div class="order-item" v-for="(item,index) in listData">
                <div class="item1">
                  <span class="text-name" :title="item.name">{{item.name}}</span>
                </div>
                <div class="time" :title="item.educationCourse.courseName">{{item.educationCourse.courseName}}</div>
                <div class="progress-main" >
                  已获得
                </div>
                <!-- <div class="progress-main" v-show="item.status=='2'">
                  支付成功
                </div>
                <div class="progress-main" v-show="item.status=='3'">
                  支付失败
                </div>
                <div class="progress-main" v-show="item.status=='4'">
                  交易关闭
                </div> -->
                <div class="number" >
                  {{item.createDate}}
                </div>
                <div class="hand">
                  <div class="hand-all">
                    <a href="javascript:;" class="go"  @click="goPay('/certificate_details',item)">查看</a>
                    <!-- <a href="javascript:;" class="quxiao">报名失败</a> -->
                  </div>

                </div>
              </div>
              <nodata v-show="listData.length==0 && start" ></nodata>
              <ui-pagination class="study-pagination" v-show="listData.length!=0" style="margin:30px 0;width:100%;" :total="total" @pageChange="pageChange" :size="pageSize"></ui-pagination>
        </div>
    </section>
</template>

<script>

import $ from 'jquery'
import { Notification } from 'element-ui';
import Pagination from '@/components/pagination.vue'
export default {
  components: {
    'ui-pagination':Pagination
  },
  data(){
    return{
      start:false,
      loading:false,
      muluList1:[],
      listData:[],
      status:'',
      pageNo:1,
      pageSize:10,
      activeName:'first',
      total:null,
      list:[
        {name:'全部',id:'',addClass:'active'},
        {name:'支付完成',id:'2',addClass:''},
        {name:'待支付',id:'1',addClass:''},
      ],
    }
  },
  computed:{

  },
  // head() {
  //   return {
  //     title: '我的订单',
  //     meta: [
  //       {
  //         hid: 'description',
  //         name: 'description',
  //         ccontent: '网校，黄山网校，在线学习，在线教育'
  //       },
  //       {
  //         hid: 'keywords',
  //         name: 'keywords',
  //         content: '网校，黄山网校，在线学习，在线教育'
  //       },
  //     ]
  //   }
  // },
  created(){
    this.getData();
  },
  mounted(){

  },
  methods:{
    select(index){
        this.list.forEach((item,i)=>{
            if(i==index){
                item.addClass="active";
                this.status = item.id;
                //this.getData();
            }
            else{
                item.addClass=""
            }
        })
    },
    handleClick(){

    },
    goPay(url,item){
      this.$router.push({
            path:url,
            query:{imgUrl:item.certificatePhoto}
        });
      // var routeData = this.$router.resolve({ path: url});
      // window.open(routeData.href, '_blank');
    },
    pageChange(index){
      this.pageNo = index;
      this.getData();
    },
    getData(){
      let that = this;
      this.loading = true;
      this.$axios.$post("/f/pageUserCertificate?pageNo="+this.pageNo+"&pageSize="+this.pageSize)
      .then(function (response) {
          that.start=true;
          let list = response.data;
          that.total = response.count;
          if(list.length!=0){
            list.forEach((item,i)=>{
              item = Object.assign(item,item.educationModelCertificate,item.educationUser)
            })
          }

          console.log(list)

          that.listData = list;
          that.loading = false;
      })
      .catch(function (error) {
          // handle error
          console.log(error);
      })
    },
  }
}
</script>
<style lang="less" >
    .myCertificate{
      padding: 25px;
      width:100%;
      .main-title{
        line-height:20px;
        padding-left:10px;
        border-left:4px solid #17a2b8;
        font-size:16px;
        color:#17a2b8;
        font-weight:500;
      }
      .titleMain{
        width:100%;
        height:35px;
        border: 1px solid #e5e5e5;
        margin: 0 ;
        padding:0 20px;
        margin-bottom:20px;
        li{
          height:33px;
          line-height:33px;
          float:left;
          text-align:center;
          color:#444444;
          font-size:14px;
        }
        .title1{
          width:225px;
          text-align: left;
          padding-left: 0px;
        }
        .title2{
          width:175px;
        }
        .title3{
          width:250px;
        }
        .title4{
          width:100px;
        }
        .title5{
          width:85px;
          float:right;
        }
      }
      .order-item{
        width:100%;
        height:50px;
        padding: 0 20px;
        margin-bottom:15px;
        border:1px solid #e5e5e5;

        padding:10px;
        .progress-main{
          width:100px;
          height:30px;
          float:left;
          line-height:30px;
          text-align:center;
          color:#777777;
          font-size:14px;
        }
        .number{
          width:175px;
          height:30px;
          float:left;
          line-height:30px;
          text-align:center;
          color:#777777;
          font-size:14px;
        }
        .item1{
          width:235px;
          float:left;
          img{
            display:block;
            width:130px;
            height:85px;
            float:left;
          }
          .text-name,.order{
            display:block;
            width:calc(100% - 20px);
            margin-left:10px;
            overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
            float:left;
            text-align:left;
            line-height:30px;
            font-size:16px;
            color:#444444;
          }
          .order{
            color:#ff9900;
          }
        }
        .name{
          line-height:30px;
          width:200px;
          display:block;
          float:left;
          font-size:16px;
          text-align:center;
          color:#666666;
          overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
        }
        .time{
          line-height:30px;
          display:block;
          float:left;
          width:250px;
          font-size:16px;
          text-align:center;
          height:40px;
          color:#666666;
          overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
        }
        .price{
          line-height:30px;
          display:block;
          float:left;
          font-size:16px;
          color:#666666;
          width:100px;
        }
        .hand{
          float:right;
          margin-right:20px;
          height:100%;
          width:75px;
          height:30px;
          display:flex;
            flex-wrap:wrap;
            align-items:center;
          .hand-all{
            width:100%;
          }
          .quxiao{
            line-height:30px;
            font-size:14px;
            color:#666666;
            text-decoration:none;
            height:30px;
            display:block;
            width:85px;
          }
          .go{
            width:75px;
            height:30px;
            line-height:30px;
            background:#17a2b8;
            margin-left:5px;
            color:#ffffff;
            text-align:center;
            display:block;
            text-decoration:none;
            font-size:14px;
            margin-left:5px;
          }
        }
      }
      .main-type{
        display:flex;
        justify-content:center;
      }
      .type-box{
        margin:0 auto;
        margin-top:0px;
        display:flex;
        float:left;
        .type-item{
          font-size:15px;
          line-height:40px;
          padding:0 25px;
          color:#555555;
          position:relative;
          cursor:pointer;
        }
        .active{
            color:#17a2b8;
        }
        .active:after{
            content:'';
            position:absolute;
            left:50%;
            transform:translateX(-50%);
            bottom:0;
            width:60%;
            height:2px;
            background:#17a2b8;

        }
      }
    }
</style>
